<template>
  <div class="search-popup">
    <van-search
      v-model="searchVal"
      show-action
      :placeholder="placeholderVal"
      @search="onSearch"
      @cancel="onCancel"
      @input="onInput"
    />
    <HistoryHot
      v-if="blockShow === 1"
      :historyKeywordList="historyKeywordList"
      :hotKeywordList="hotKeywordList"
      @tagSearch="tagSearch"
    ></HistoryHot>
    <SearchTipsList
      v-else-if="blockShow === 2"
      :searchTipsList="searchTipsList"
      @tipSearch="tagSearch"
    ></SearchTipsList>
    <SearchProducts
      v-else
      :filterCategory="filterCategory"
      :SearchGoodsList="SearchGoodsList"
      @changeCategory="changeCategory"
      @changePrice="changePrice"
    ></SearchProducts>
  </div>
</template>

<script>
import {
  getSearchPopupData,
  getSearchTipsListData,
  getSearchGoodsData,
} from "../request/api"
import HistoryHot from "../components/HistoryHot"
import SearchTipsList from "../components/SearchTipsList.vue"
import SearchProducts from "../components/SearchProducts.vue"
export default {
  name: "SearchPopup",
  components: {
    HistoryHot,
    SearchTipsList,
    SearchProducts,
  },
  data() {
    return {
      searchVal: "", //搜索框内容
      placeholderVal: "", //提示文本
      blockShow: 1, //1:展示历史记录和热门搜索2.展示搜索提示的列表3.搜索结果
      historyKeywordList: [],
      hotKeywordList: [],
      searchTipsList: [],
      SearchGoodsList: [],
      filterCategory: [],
      // 价格排序:
      order: "desc",
      // 分类id
      categoryId: 0,
      // 默认搜索方式  是id还是price
      sort: "id",
    }
  },

  created() {
    getSearchPopupData()
      .then((res) => {
        // console.log(res)
        if (res.errno === 0) {
          this.placeholderVal = res.data.defaultKeyword.keyword
          this.historyKeywordList = res.data.historyKeywordList
          this.hotKeywordList = res.data.hotKeywordList
          // console.log(this.historyKeywordList)
        }
      })
      .catch(() => {
        this.$toast.fail("获取数据失败")
      })
  },

  methods: {
    changeCategory(val) {
      this.categoryId = val
      // 发送按分类搜索时的请求
      this.onSearch(this.searchVal)
    },
    // 按价格搜索
    changePrice(val) {
      this.order = val
      this.sort = "price"
      this.onSearch(this.searchVal)
    },
    // 按标签搜索
    // 按搜索提示搜索
    tagSearch(val) {
      // 改变搜索框的值，因为后面按价格高低排序调用 changePrice()的时候传入的就是这次点击的标签的值
      this.searchVal = val
      this.onSearch(val)
    },
    // 回车后调用
    onSearch(val) {
      // 回车时执行
      this.blockShow = 3
      getSearchGoodsData({
        keyword: val,
        page: 1,
        size: 10,
        order: this.order,
        categoryId: this.categoryId,
        sort: this.sort,
      }).then((res) => {
        // console.log(res)
        if (res.errno === 0) {
          this.SearchGoodsList = res.data.goodsList
          //快速修改某个数组中一个或多个对象的属性名
          this.filterCategory = JSON.parse(
            JSON.stringify(res.data.filterCategory)
              .replace(/name/g, "text")
              .replace(/id/g, "value")
          )
          // console.log(this.filterCategory)
        }
      })
    },
    onCancel() {
      // 取消
      // 返回原路由地址
      this.$router.go(-1)
    },
    // 搜索提示
    onInput(val) {
      this.blockShow = 2
      getSearchTipsListData({ keyword: val.trim() }).then((res) => {
        if (res.errno === 0) {
          this.searchTipsList = res.data
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
/* 弹层用定位做的 */
.search-popup {
  width: 100%;
  height: 100%;
  position: absolute;
  right: 0;
  top: 0;
  background-color: #efefef;
}
</style>
